<template>
  <div class="search">
    <form action="/">
      <van-search v-model="value" show-action placeholder="请输入影城名称" @search="onSearch" @cancel="onCancel"/>
    </form>

    <div class="cinema-nearby" v-if="!value">
      <div class="cinema-index-title">离你最近</div>
      <ul class="cinema-index-detail">
        <li class="cinema-item-detail" v-for="(t ,index) in lately" :key="index" @click="Cinemaolick(t.cinemaId)">
          <div class="cinema-item-text">{{t.name}}</div>
        </li>
      </ul>
    </div>

    <ul v-if="value" class="search_txt">
      <li v-for="(t, index) in dataList" :key="index">
        <div class="cinema">
          <div class="left">
            <p class="left_txt">{{ t.name }}</p>
            <p class="left_address">{{ t.address }}</p>
          </div>
          <div class="right">
            <span class="right_txt">￥{{ t.lowPrice / 100 }}</span>
            <span>起</span>
            <p class="right_address">距离未知</p>
          </div>
        </div>
      </li>
    </ul>

    <!-- <div class="Search-result" v-show="show">
      <img src="https://assets.maizuo.com/h5/v5/public/app/img/rectangle@2x.2bdf0374.png" alt="">
      <p>没有找到匹配的影院</p>
      <p class="empty-list-tip">提示：仅支持搜索“影院”，建议您检查输入的影院名称是否有误？</p>
    </div> -->
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import { SearchNearestAPI } from "@/api/index.js";
import { computed, onMounted, watch } from "@vue/runtime-core";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

export default {
  name: "Search",
  component:{
  
  },
  setup(props) {
    const root = reactive({
      value: "",
      lately:[],
    });
   
    const store = useStore();
    const toute = useRouter();

    let dataList = computed(() => {
      return store.state.CinemaList.filter(
        (val) => val.name.toUpperCase().includes(root.value.toUpperCase()) || val.address.toUpperCase().includes(root.value.toUpperCase()))
    });

    const SearchLately = async ()=>{
      const {data:res} = await SearchNearestAPI({id:store.state.city.cityId});
      if(res.msg == 'ok'){
        root.lately = res.data.cinemas.splice(0,5)
        
      }
    }

    const Cinemaolick = (id)=>{
     
      toute.push({
        name:'cinema',
        params:{
          cinemaId:id
        }
      })
    }


    onMounted(()=>{
      SearchLately()
      store.dispatch('GET_SOCKET_INFO')
    })

    const onSearch = (val) => {
     
    };

    const onCancel = () => {
      toute.go(-1);
    };
    return {
      ...toRefs(root),
      onSearch,
      onCancel,
      dataList,
      Cinemaolick
    };
  },
};
</script>

<style lang="less" scoped>
.cinema {
  padding: 15px;
  display: flex;
  background: white;
  border-bottom: 1px solid #ededed;
  justify-content: space-between;
  & .left {
    width: calc(100% - 65px);
    & .left_txt {
      font-size: 15px;
    }
    & .left_address {
      margin-top: 5px;
      font-size: 12px;
      color: #797d82;
      max-width: 80%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  & .right {
    text-align: center;
    & .right_txt {
      font-size: 15px;
      color: #ff5f16;
    }
    & span {
      font-size: 12px;
      color: #ff5f16;
    }
    & .right_address {
      font-size: 12px;
      color: #797d82;
      margin-top: 5px;
    }
  }
}
.title_fiex {
  width: 100%;
  position: fixed;
  top: 0;
}
form {
  position: fixed;
  width: 100%;
  top: 0;
}
// .search_txt {
//   padding-top: 45px;
// }
.Search-result {
  position: absolute;
  top: 150px;
  width: 100%;
  text-align: center;
  img {
    margin: 0 auto;
    width: 90px;
  }
  p {
    color: #bdc0c5;
    font-size: 14px;
    margin: 0;
  }
  .empty-list-tip {
    font-size: 11px;
    padding: 0 22vw;
  }
}
.search {
  height: 100%;
  background: white;
}
.search{
  padding-top: 60px;
}
.van-search{
  border-bottom: 1px solid #ededed;
}
.cinema-nearby{
    padding: 0 15px 8px 0;
    margin-left: 15px;
    position: relative;
    .cinema-index-title{
      font-size: 13px;
      line-height: 13px;
      color: #bdc0c5;
      margin: 18px 0;
    }
    .cinema-index-detail{
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
    }
    .cinema-item-detail{
    text-align: center;
    padding-bottom: 10px;
    padding-right: 10px;
    float: left;

    .cinema-item-text{
    height: 30px;
    background-color: hsla(0,0%,95.7%,.6);
    line-height: 14px;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 13px;
    padding: 8px 12px;
    }
  }
}
 
</style>